<template>
  <div>
    <div class="com-top-nav">
      <van-nav-bar
        left-arrow
        @click-left=""
        title="与xx聊天"
      />
    </div>
    <div class="chat-box">
      <!--<p class="left toUser"><img class="headimg" src="/static/img/person.jpg" alt=""><span></span></p>-->
      <div v-for="(item,idx) in msg">
        <p class="time">{{item.time}}</p>
        <div :class="[item.toUser==item.fromUser?'left':'right','toUser',item.toUser==item.fromUser?'div':'div2']">
          <div class="inner">
            <p>{{item.msg}}</p>
          </div>
          <img class="headimg" src="/static/img/person.jpg" alt="">
        </div>
      </div>
    <!--  <div v-for="(item,idx) in msg">
        <p class="time">{{item.time}}</p>
        <div class="right fromUser div2">
          <img class="headimg" src="/static/img/person.jpg" alt="">
          <div class="inner">
            <p>{{item.msg}}</p>
          </div>
        </div>
      </div>-->
    </div>
    <div class="chat">
      <div class="input">
        <textarea v-model="message"></textarea>
      </div>
      <div class="button">
        <button @click="sendMsg">发送</button>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    data(){
      return{

      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  .chat{
    position: fixed;
    left: 0;
    width: calc(100% - 30px);
    bottom: 0;
    background: rgba(132, 140, 156, 1);
    padding: 9px 15px;
    display: flex;
    justify-content: space-between;
    .button{
      height: 35px;
      text-align: center;
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      width: 88px;
      line-height: 35px;
      font-size: 14px;
      background: #38f;
      color: #fff;
    }
    .input{
      flex: 1;
      display: flex;
      textarea{
        border-bottom-left-radius: 4px;
        border: none;
        line-height: 40px;
        border-top-left-radius: 4px;
        height: 35px;
        font-size: 14px;
        text-indent: 15px;
        outline: none;
        flex: 1;

      }

    }

  }
.chat-box{
  margin-bottom: 60px;
  .time{
    font-size: 12px;
    text-align: center;
  }
  .div{
      display: flex;
      justify-content: flex-end;
      position: relative;
      margin-top: 20px;
    .inner{
      display: flex;
      border-radius: 4px;
      padding: 4px;
      p{
        color: #36383B;
        word-wrap:break-word; max-width:200px;
      }
      color: #36383B;
      /*background: #2d898f;*/
      span{
        font-size: 12px;
      }
    }
    .headimg{
      right: 20px;
      margin: 15px;
      margin-top: 0;
      height: 40px;
      width: 40px;
      border-radius: 20px;
    }
  }
  .div2{
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-top: 20px;
    .inner{
      display: flex;
      border-radius: 4px;
      padding: 4px;
      p{
        color: #36383B;
        word-wrap:break-word; max-width:200px;
      }
      color: #36383B;
      /*background: #2d898f;*/
      span{
        font-size: 12px;
      }
    }
    .headimg{
      right: 20px;
      margin: 15px;
      margin-top: 0;
      height: 40px;
      width: 40px;
      border-radius: 20px;
    }
  }

}
</style>
